<script setup lang="ts">
import { IconStarFill } from '@arco-design/web-vue/es/icon'

import type { BasicSectionProps } from './BasicSection.vue'

const props: BasicSectionProps = {
  title: '套餐介绍',
  description: '无门槛体验CDN畅快加速'
}
</script>

<template>
  <basic-section :height="882" id="package-introduction" v-bind="props">
    <div class="flex items-center">
      <div
        v-for="(pkg, idx) in mainParts.packageIntroduce"
        :key="idx"
        v-shadow="pkg?.star ? { filter: 100, radius: 150 } : 'none'"
        :class="{
          'medium-card': pkg.size === 'medium',
          'large-card': pkg.size === 'large'
        }"
      >
        <i-pi-bandwidth class="icon" v-if="pkg.icon === 'bandwidth'" />
        <i-pi-flow class="icon" v-if="pkg.icon === 'flow'" />
        <i-pi-free class="icon" v-if="pkg.icon === 'free'" />

        <div class="title">
          <icon-star-fill class="star" v-if="pkg?.star" />
          {{ pkg.title }}
          <icon-star-fill class="star" v-if="pkg?.star" />
        </div>
        <p class="desc">{{ pkg.description }}</p>
        <free-use-button class="mt-16" reverse v-if="pkg?.button">
          免费使用
        </free-use-button>
      </div>
    </div>
  </basic-section>
</template>

<style scoped lang="less">
#package-introduction {
  background-image: url('@/assets/images/main-parts/bg/package-introduction.webp');
  .medium-card,
  .large-card {
    @apply flex flex-col items-center py-20 px-12 overflow-hidden;

    &:hover {
      .star {
        transform: rotate(72deg);
      }
    }
  }
  .medium-card {
    @apply w-467px h-398px;
    background-color: #eff5ff;
    border: 1px solid #fff;
    &:first-child {
      @apply rounded-l-2xl;
    }
    &:last-child {
      @apply rounded-r-2xl;
    }
  }

  .large-card {
    @apply w-456px h-484px;
    border-radius: 16px;
    background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
    box-shadow: 0px 0px 50px 0px rgba(37, 114, 250, 0.3);
    .title,
    .desc {
      @apply text-white;
    }
  }
  .icon {
    @apply mb-8;
  }
  .title,
  .desc {
    @apply m-0;
  }

  .title {
    @apply text-xl;
    color: #0d0e15;
    line-height: 150%; /* 30px */
    font-family: 'PingFang SC medium';
  }
  .desc {
    @apply text-center text-base font-normal mt-4;
    color: #41464f;
    line-height: 150%;
  }

  .star {
    transform: rotate(0deg);
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>
